/*
 * Copyright 2024 The Google Research Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Miniwob related styling.
 * Some of the styling are copied from the MiniWoB repo and modified:
 * https://github.com/stanfordnlp/miniwob-plusplus
 */
body {
  background-color: #555;
  font-family: Arial;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

#wrap {
  height:210px;
  background-color: white;
  width:160px;
}

#query .bold,
#area .bold { font-weight: bold; }

/* reward display CSS below */
#reward-display {
  font-size: 14px;
  height: 210px;
  width: 160px;
  position: absolute;
  left: 165px;
  top: 0;
}

#reward-display .info {
  display: block;
  margin: 10px 5px;
}

#reward-last, #reward-avg, #timer-countdown, #episode-id {
  font-weight: bold;
}

#reward-avg {
  display: inline-block;
}

#area button.secondary-action {
  padding: 6px 25px;
}

/* task cover for synchronization */
#sync-task-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 210px;
  background-color: #111;
  color: #eee;
  text-align: center;
  line-height: 210px;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
}
#sync-task-cover.transparent {
  background-color: transparent;
  color: transparent;
  cursor: not-allowed;
}

/* canvas for tracking clicks */
#click-canvas {
  position: absolute;
  left: 165px;
  top: 0;
  background-color: white;
}
/* canvas for visualizing attention */
#attention-canvas {
  position: absolute;
  left: 330px;
  top: 0;
  background-color: black;
}

/* Record demonstrations */
#server-name,
#server-reply {
  font-size: 80%;
}



#wrap,
#sync-task-cover {
  height: 667px;
  width: 375px;
}

#wrap {
  overflow-x: auto;
  overflow-y: auto;
  border: 0;
}

#click-canvas,
#reward-display {
  left: 380px;
}

#query {
  background-color: #ff0;
  position: absolute;
  top: 215px;
  left: 380px;
  width: 320px;
  height: auto;
  overflow-y: auto;
  font-size: 10px;
  padding: 3px;
}



/* Styling for conceptual environments */

.bold { font-weight: bold; }

.miniwobpopup {
  position: absolute;
  top: 62px; left: 8px;
  width: 350px; height: 120px;
  border: 2px solid #888;
  background-color: #eee;
  padding: 5px 10px; font-size: 12px;
  display: flex; flex-direction: column; justify-content: space-around;
  z-index:1000;
}
.miniwobpopup p {
  margin: 0; text-align: center;
}

.disableElements {
    pointer-events:none;
}

